// const snabbdom = require('snabbdom');
import { init, h, thunk } from "snabbdom";

// 引入简单数据进行测试
// import {
//   oldVals,
//   newVals
// } from '../data/simple-vnode.js'

// 引入复杂数据进行测试
// import {
//   oldVals,
//   newVals
// } from '../data/intricate-vnode.js'

// 引入不同key值数据进行测试
import {
  oldVals,
  newVals
} from '../data/diff-vnode.js'

const patch = init([]);

/**
 * 
 * @param {array} isVals 
 * @param {boolean} isKey 
 */
const assist = (isVals, isKey = true) => {
  const results = (isVals || []).map(tag => {
    const options = {
      key: tag.key ? tag.key : undefined
    }
    let content = [];
    if (tag.children) {
      content = assist(tag.children);
    }
    content = content.length ? [tag.text, ...content] : tag.text;
    const vnode = h(tag.name, isKey ? options : {}, content);
    console.log(vnode);
    return vnode;
  });
  console.log(results);
  return results;
}

const app = document.querySelector('#app');


let OldChildren = assist(oldVals);
console.log(OldChildren)
let NewChildren = assist(newVals);
// let NewChildren = assist(newVals, false);


let oldValNode = h('ul', { key: '#20' }, OldChildren);
let newValNode = h('ul', { key: '#20' }, NewChildren);

patch(app, oldValNode);
console.time("This is LOG");
patch(oldValNode, newValNode);
console.timeEnd("This is LOG");




if (false) {
  console.warn("以下代码，测试是否带有key参数的影响?");
  const tempaltes = h('div', 'This is Running');
  patch(newValNode, tempaltes);
  patch(tempaltes, oldValNode);

  NewChildren = assist(newVals, false);
  // NewChildren = assist(newVals);
  newValNode = h('ul', { key: '#20' }, NewChildren);
  console.time("This is END");
  patch(oldValNode, newValNode);
  console.timeEnd("This is END");
}
